<template>
  <div class="flow-row">
    <div class="flow-branch">
      <div class="meet-node"></div>
      <div class="flow-col" v-for="(branch, index) in node.branchs" :key="index">
        <div class="clear-left-border" v-if="index == 0"></div>
        <div class="clear-right-border" v-if="node.branchs.length - 1 == index"></div>
        <div class="flow-row">
          <div class="flow-box">
            <div class="flow-item flow-node-branch">
              <div class="flow-branch-suggest">
                <div class="node-name">
                  <span>{{ branch.name }}</span>
                  <span style="margin-left: 10px;">
                    <a-icon v-if="index == 0" type="check-circle" theme="filled" style="color: green;"/>
                    <a-icon v-if="node.branchs.length - 1 == index" type="close-circle" theme="filled"
                            style="color: red;"/>
                  </span>
                </div>
                <div v-if="!readable && !branch.deletable" class="close-icon">
                  <i class="el-icon-circle-close" @click.stop="branch.deletable = true"/>
                  <el-icon @click.stop="branch.deletable = true">
                    <CircleClose/>
                  </el-icon>
                  <!--                  <a-icon type="close-circle" @click.stop="conditionNode.deletable = true" />-->
                </div>
                <!-- 删除提示 -->
                <DeleteConfirm :node="branch" @callback="delCallback"/>
              </div>
            </div>
            <FlowAddNode :node="node" @update:node="node = $event" :nodeType="3" :id="branch.id"
                         :readable="readable"/>
          </div>
        </div>
        <FlowNode v-if="branch.childNode && branch.childNode.hasOwnProperty('name')"
                  :node="branch.childNode" :readable="readable"/>
      </div>
    </div>
    <div class="after-branch-btn">
      <FlowAddNode :node="node" @update:node="node = $event" :nodeType="4" :readable="readable"/>
    </div>
    <!-- <FlowBranchSetting ref="flowBranchSetting" @close="isActive = false"/> -->
  </div>
</template>
<script setup name="FlowSuggestNode">
import {flowMixin} from '../../../mixins/flowMixin';
import FlowNode from './FlowNode.vue';
import FlowAddNode from '../flowAddNode.vue';
// import FlowBranchSetting from '../../FlowDrawer/Branch/index.vue';
import EditName from '../../../common/EditName.vue';
import DeleteConfirm from '../../../common/DeleteConfirm.vue';

import {reactive, ref, createApp, defineEmits, defineProps, computed, onMounted, toRefs} from "vue";
import {useStore} from "vuex";
import flowhook from '../../../mixins/flowhook';

const {uuid,nameClass,delNode} = flowhook();
/* 组件局部注册 */
const store = useStore();

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
})

const {node, readable} = toRefs(props)

const delCallback = (conditionNode) => {
  let currNode = {
    id: this.node.pid,
  };
  // 将对应的审批节点的添加按钮开启
  store.dispatch('process/updateNode', {currNode, field: 'addable', value: true});
}
</script>
